<template>
	<view style="height: 500rpx;">
		<qiun-data-charts type="line" :opts="opt" :chartData="chartData" background="none" :ontouch="true" :canvas2d="true"/>
	</view>
</template>

<script>
export default {
	props: {
		count: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			chartData: {}
		};
	},
	created() {
		this.init();
	},
	watch: {
		count(n) {
			this.init();
		}
	},
	methods: {
		init() {
			if (this.count) {
				let series = [
					{
						name: '实名制进场人数',
						data: [],
						type: 'point',
						color: '#4D94F3'
					},
					{
						name: '考勤总人数',
						data: [],
						type: 'point',
						color: '#FDCD37'
					}
				];
				for (let i in this.count) {
					series[0].data.push(this.count[i].staffs);
					series[1].data.push(this.count[i].atdStaffs);
				}
				let chartData = {
					categories: this.count.map(i => {
						return i.districtName || i.projectType;
					}),
					series: series
				};
				this.chartData = chartData;
			} else {
				this.chartData = {};
				console.error('人员管理', '人员管理无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				xAxis:{
				    itemCount: 3,
				    rotateLabel: false,
				    scrollShow:true,
				    disableGrid:true
				},
				yAxis: {
				    showTitle:true,
				    data: [
				        {
				            position: 'left',
				            title: '实名制进场人数',
				            titleFontSize: 10,
							textAlign: 'right'
				        }, 
				        {
				            position: 'right',
				            title: '考勤总人数',
				            titleFontSize: 10,
							textAlign: 'right'
				        }
				    ]
				},
				enableScroll: true, 
			};
		}
	}
};
</script>

<style></style>
